<template>
	<view >
		<z-nav-bar title="反馈"></z-nav-bar>
		<form action="" class="">
			<view class="box padding bg-white">
				<view class="">
					<u--textarea v-model="text" placeholder="在这里写下您的建议，我们将会为您提供更好的服务～" count maxlength="200"></u--textarea>
					<!-- <view class="cu-form-group padding-lg" style="position: relative;" >
						<textarea maxlength="200" class="content"  placeholder="在这里写下您的建议，我们将会为您提供更好的服务～" v-model="text" placeholder-class="ys"></textarea>
						
						<view class="len ys">
							{{text_len}}/200
						</view>
					</view> -->
				</view>
				
				<view class="margin-top-xl" >
					<view class="pictitle margin-bottom-sm flex">
						<text class="pic-tit">上传图片</text>
						<text class="piclen">({{imgList.length}}/3)</text>
					</view>
					
					<view class="grid col-3 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg(index)" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="addimg solids" @tap="ChooseImage" v-if="imgList.length<3">
							<text class='cuIcon-add' style="color: #7F5AFF;"></text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="footer">
				<button class="x-btn x-btn-1" v-if="text == ''">立即提交</button>
				<button class="x-btn" v-else @click="submit">立即提交</button>
			</view>
		</form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				imgList: [],
				text:'',
				text_len:0,
			};
		},
		watch:{
			text(v){
				console.log(v);
				this.text_len = v.length;
			}
		},
		methods:{
			PickerChange(e) {
				this.index = e.detail.value
			},
			ChooseImage() {
				this.$http.urlImgUpload({
				     count: 3
				    }).then(e=>{
						this.imgList = [...this.imgList,...e]
				    })
			},
			ViewImage(e) {
				let arr = []
				this.imgList.forEach((v)=>{
					arr.push(v)
				})
				let url = e.currentTarget.dataset.url
				uni.previewImage({
					urls: arr,
					current: url
				});
			},
			DelImg(i){
				this.imgList.splice(i,1)
			},
			// 提交反馈
			submit(){
				var that = this
				that.$http.post('api/ZhMessage/add',{
					'content': that.text,
					'images': that.imgList ? that.imgList.join() : ''
				}).then(res=> {
					if(res){
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							success:(res)=> {
								setTimeout(r=>{
									uni.navigateBack()
								},1500);
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">

.box{
	
border-radius: 24rpx;
}
.cu-form-group{
	padding: 0;
}
.ys {
	font-size: 28rpx;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #BEC6D3;
	line-height: 42rpx;
}
.len{
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
}
.cu-form-group textarea{
	margin: 0;
	border-bottom: 2upx solid #F2F5F8;
	height: 240rpx;
	padding: 20rpx;
		
	background: #F6F7FA;
	
border-radius: 12rpx;
}

.pictitle{
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: #000013;
	.piclen{
		margin-left: 20rpx;
	}
}

.solids::after{
	border: 4rpx dashed #7F5AFF;
	border-radius:	24rpx !important;
}
.addimg{
	color: #7F5AFF !important;
	background-color: #F7F5FF;
	// border-radius:	24rpx !important;	
}

.footer{
	padding: 20rpx 30rpx;
	// position: fixed;
	// left: 0;
	// bottom: 0;
	width: 100%;
	background-color: #FFFFFF;
	.x-btn{
		height: 80rpx;
		background: #7F5AFF;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
	}
	.x-btn-1 {
		background-color: #BEC6D3;
	}
}

</style>
